{extend name='index@Common/index' /} {block name='content'}

<div class="card">
  <div class="card-header  border-t bg-white">
    <!-- <p><small>查询财务状况或管理优惠券和发票。</small></p> -->
    <div class="tool-list d-flex">
      <ul class="list-inline mr-auto mb-0 form-inline">
        <li class="list-inline-item border-right">
          <a href="{:url('index/Ticket/list')}" class="px-3">&lt返回 </a>
        </li>
        <li class="list-inline-item px-3">
          <span class="fs-16">创建工单</span>
        </li>
      </ul>
    </div>
  </div>
  <div class="card-body fs-12 col-6 form">
    <div class="cont-box">
      <div class="col-12 ">
        <div class="form-group form-row">
          <label for="" class="col-form-label col-2">工单类型：</label>
          <div class="col">
            <select class="form-control form-control-sm" name="type">
              <option vlaue="产品咨询" selected>产品咨询</option>
              <option vlaue="网站咨询">网站咨询</option>
              <option vlaue="咨询建议">咨询建议</option>
              <option vlaue="文档问题">文档问题</option>
            </select>
          </div>
        </div>
      </div>
      <div class="col-12 ">
        <div class="form-group form-row">
          <label for="" class="col-form-label col-2">工单标题：</label>
          <div class="col">
            <input type="text" name="title" class="form-control form-control-sm" placeholder="标题长度限制为30个字"
              maxlength="30" />
          </div>
        </div>
      </div>
      <div class="col-12 ">
        <div class="form-group form-row">
          <label for="" class="col-form-label col-2">问题描述：</label>
          <div class="col-10">
            <div class="form-control form-control-sm content" name="content" data-name="content" contenteditable="true"
              style="height: 100px;overflow: auto;"></div>
          </div>
        </div>
      </div>
      <div class="col-12 ">
        <div class="form-group form-row">
          <label for="" class="col-form-label col-2">附加文件：</label>
          <div class="col">
            <div class="row file-list">
              <div class="col">
                  <input type="file" id="file" class="upfile" data-rule=".jpg,.png,.gif" data-size="2" data-width="200px" data-height="200px" autocomplete="off"> 
                  <input type="hidden" id="imgs" name="imgs" value="" autocomplete="off">
                  <p class="help-block">请上传 ".jpg"、".png"、".gif" 并且大小不超过2M 的图片文件</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="form-group form-row">
          <div class="col offset-2 p-1">
            <button class="btn btn-primary sub">提交</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{/block} {block name='modal'} {/block} {block name='js'}
<script>
  callEditor();
  $('.upfile').change(function() {
        let tfile = $(this),
            imgurl = '',
            formdatas = new FormData(),
            suffix = tfile[0].files[0].name.substr(tfile[0].files[0].name.lastIndexOf("."));
        if (tfile.data('rule').indexOf(suffix) < 0) {
            alert('文件类型不符合要求');
            return false;
        }
        if ((tfile[0].files[0].size / 1024 / 1024) >= Number(tfile.data('size'))) {
            alert('图片尺寸大于2M');
            return false;
        }
        formdatas.append('file', tfile[0].files[0]);
        ajax('/uploadImg', formdatas, 'post', true).then(e => {
            if (e.status == 200) {
                tfile.siblings('[name="imgs"]').val(e.data);
                if (tfile.next().prop('nodeName') == 'IMG') {
                    tfile.next().attr('src', e.data);
                    return;
                }
                tfile.after(`<img src="${e.data}" style="max-width:${tfile.data('width')};max-height: ${tfile.data('height')};margin-top: 15px;display: block;"/>`);
                return;
            }
            alert(e.msg);
        });
    });
  $('.sub').click(function () {
    let names = document.querySelectorAll('.form .form-group > div [name]'),
      vals = {};
    names = [].slice.call(names);
    names.map((e) => {
      let name = e.name && e.name || $(e).data("name");
      console.log(name)
      vals[name] = e.value && e.value || $(e).html();
    });
    ajax('{:url("index/Ticket/addauth")}', vals, 'post').then(e => {
      if (e.status === 200) {
        alert(e.msg);
        location.href = "{:url('index/Ticket/list')}";
      } else {
        alert(e.msg);
      }
    });
  });
</script>
{/block}